import Link from "next/link";
import { notFound } from "next/navigation";
import { ArrowLeft } from "lucide-react";
import { requireAdmin } from "@/lib/session";
import { getUserDetail } from "@/lib/queries/admin";
import { formatDate, formatNumber, truncate } from "@/lib/format";
import { PageHeader } from "@/components/ui/page-header";
import { Badge, StatusBadge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Stat, StatGrid } from "@/components/ui/stat";
import { Table, TableBody, TableCell, TableEmpty, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Alert } from "@/components/ui/alert";
import { CopyButton } from "@/components/ui/copy-button";
import { DateCell, KV, Mono, Panel, PlanBadge } from "@/components/admin/primitives";
import { UserActions } from "@/components/admin/user-actions";

export const dynamic = "force-dynamic";

export default async function AdminUserDetail({ params }: { params: Promise<{ id: string }> }) {
  const admin = await requireAdmin();
  const { id } = await params;
  const d = await getUserDetail(id);
  if (!d) notFound();
  const { user } = d;

  return (
    <>
      <div className="mb-4">
        <Button asChild variant="ghost" size="sm" className="-ml-2">
          <Link href="/admin/users">
            <ArrowLeft className="size-3.5" /> Users
          </Link>
        </Button>
      </div>
      <PageHeader
        eyebrow="User"
        title={
          <span className="flex flex-wrap items-center gap-2">
            {user.email}
            {user.role === "admin" ? <Badge variant="danger">admin</Badge> : null}
            {user.banned ? <Badge variant="danger" dot>banned</Badge> : null}
            {user.emailVerified ? <Badge variant="success" dot>verified</Badge> : <Badge variant="outline">unverified</Badge>}
          </span>
        }
        description={
          <span className="inline-flex items-center gap-1">
            <Mono>{user.id}</Mono>
            <CopyButton value={user.id} size="icon-sm" className="size-6" />
          </span>
        }
        actions={<UserActions userId={user.id} banned={user.banned} role={user.role} emailVerified={user.emailVerified} isSelf={user.id === admin.id} />}
      />

      {user.banned ? (
        <Alert variant="danger" title="This account is banned" className="mb-4">
          Reason: {user.banReason || "not recorded"}
        </Alert>
      ) : null}

      <StatGrid cols={4} className="mb-6">
        <Stat label="Organizations" value={formatNumber(d.memberships.length)} />
        <Stat label="Projects" value={formatNumber(d.projectsCount)} />
        <Stat label="API keys" value={formatNumber(d.keysCount)} hint="incl. revoked" />
        <Stat label="Requests (30d)" value={formatNumber(d.requests30d)} hint="across their organizations" />
      </StatGrid>

      <div className="grid gap-6 lg:grid-cols-2">
        <Panel title="Profile">
          <KV
            items={[
              { label: "Name", value: user.name || "—" },
              { label: "Email", value: user.email },
              { label: "Role", value: user.role },
              { label: "Email verified", value: user.emailVerified ? "yes" : "no" },
              { label: "Onboarding completed", value: user.onboardingCompletedAt ? formatDate(user.onboardingCompletedAt) : "not yet" },
              { label: "Created", value: formatDate(user.createdAt) },
              { label: "Updated", value: formatDate(user.updatedAt) },
              { label: "Image", value: user.image ? truncate(user.image, 40) : "—", mono: true },
            ]}
          />
        </Panel>
        <Panel title="Organizations" flush>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Organization</TableHead>
                <TableHead>Plan</TableHead>
                <TableHead>Role</TableHead>
                <TableHead>Status</TableHead>
                <TableHead className="text-right">Joined</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {d.memberships.length === 0 ? (
                <TableEmpty colSpan={5}>No memberships.</TableEmpty>
              ) : (
                d.memberships.map((m) => (
                  <TableRow key={m.organizationId}>
                    <TableCell>
                      <Link href={`/admin/organizations/${m.organizationId}`} className="font-medium hover:underline">
                        {m.name}
                      </Link>
                    </TableCell>
                    <TableCell>
                      <PlanBadge plan={m.plan} />
                    </TableCell>
                    <TableCell className="text-fg-muted">{m.role}</TableCell>
                    <TableCell>{m.suspended ? <StatusBadge status="suspended" /> : <StatusBadge status="active" />}</TableCell>
                    <TableCell className="text-right">
                      <DateCell value={m.joinedAt} />
                    </TableCell>
                  </TableRow>
                ))
              )}
            </TableBody>
          </Table>
        </Panel>
      </div>

      <Panel title="Sessions" description="Most recent 10 login sessions." flush className="mt-6">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Created</TableHead>
              <TableHead>Expires</TableHead>
              <TableHead>IP</TableHead>
              <TableHead>User agent</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {d.sessions.length === 0 ? (
              <TableEmpty colSpan={4}>Never logged in.</TableEmpty>
            ) : (
              d.sessions.map((s) => (
                <TableRow key={s.id}>
                  <TableCell>
                    <DateCell value={s.createdAt} relative={false} />
                  </TableCell>
                  <TableCell>
                    <DateCell value={s.expiresAt} />
                  </TableCell>
                  <TableCell>
                    <Mono>{s.ipAddress ?? "—"}</Mono>
                  </TableCell>
                  <TableCell className="max-w-[420px] truncate text-[12.5px] text-fg-muted" title={s.userAgent ?? undefined}>
                    {s.userAgent ?? "—"}
                  </TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </Panel>

      <Panel title="Audit trail" description="Last 50 audit entries where this user is the actor." flush className="mt-6">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>When</TableHead>
              <TableHead>Action</TableHead>
              <TableHead>Target</TableHead>
              <TableHead>Metadata</TableHead>
              <TableHead>IP</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {d.audit.length === 0 ? (
              <TableEmpty colSpan={5}>No audit entries.</TableEmpty>
            ) : (
              d.audit.map((a) => (
                <TableRow key={a.id}>
                  <TableCell>
                    <DateCell value={a.createdAt} relative={false} />
                  </TableCell>
                  <TableCell>
                    <Badge variant={a.action === "admin.action" ? "danger" : "default"}>{a.action}</Badge>
                  </TableCell>
                  <TableCell>
                    <Mono>{a.target ?? "—"}</Mono>
                  </TableCell>
                  <TableCell className="max-w-[360px] truncate font-mono text-[12px] text-fg-muted" title={a.metadata ? JSON.stringify(a.metadata) : undefined}>
                    {a.metadata ? JSON.stringify(a.metadata) : "—"}
                  </TableCell>
                  <TableCell>
                    <Mono>{a.ipAddress ?? "—"}</Mono>
                  </TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </Panel>
    </>
  );
}